<template>
    <ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media" v-for="item in newslist" :key="item.id">
					<router-link :to="'/home/newsinfo/' +item.id">
						<img class="mui-media-object mui-pull-left" :src=" item.img_url">
						<div class="mui-media-body">
							<h3 class="show-name">{{ item.title}}</h3>
                        	<p class='mui-ellipsis'>
                                <span>发表时间：{{ item.add_time | dataFormat }}</span>
                                <span>点击：{{ item.click }}次</span>
                            </p>
						</div>
					</router-link>
				</li>
		
		

			</ul>
</template>
<script>
 import { Toast } from "mint-ui"
    export default{
		data(){
			return {
				newslist: []
			}
		},
		created(){
			this.getNewsList()
		},
		methods:{
			getNewsList(){
				this.$http.get("../../api/newslist.json").then(result=>{
					if(result.body.status=== 0){
						//如果没有失败，应该吧数据保存到 data 上
						this.newslist=result.body.message
					}else{
						Toast('获取新闻资讯列表失败')
					}
				})
			}
		}
    }
</script>

<style scope>
    .show-name{
		font-size: 14px;
		overflow: hidden;
		text-overflow: ellipsis;
		-ms-text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		white-space: nowrap;
		}
    .mui-ellipsis{
        font-size: 12px;
        color: #cccccc;
        display: flex;
         justify-content: space-between;/*两端对齐 */
    }
</style>

